<template>
  <div class="videoPlay1">
    <div v-if="videoData.url" ref="thisEl" style="width: 100%;height: 100%" class="mse" ></div>
    <!--没有播放路径显示占位图-->
    <div v-else class="cover-img">
      <img class="_img" style="width: 100%;height: 100%;background: #2d8cf0">
    </div>
  </div>

</template>
<script>
export default {
  props: {
    height: {
      type: Number,
      default: 180,
    },
    width: {
      type: Number,
      default: 280,
    },
    showName: {
      type: Boolean,
      default: true,
    },
    videoData: {
      type: Object,
      default: () => {
        return {
          // url:'wss://xingtai-media.tocc.net.cn:9443/rtp/13050600001110040002_13050600001320040004.live.flv'
          url:false
        }
      }
    },
  },
  data() {
    return {
      player:null,
      isLoading:false,
      config:{
        data: [],
        rowNum: 5,
        carousel: "single",
      },
      styleWarp:{
        width: 100 + 'px',
        height: 100  + 'px'
      }
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    if (this.videoData.url) {
      this.replayVideo(this.videoData)
    }
  },
  methods: {//执行的方法
    initVideo(){
      this.$nextTick(() => {
        // 初始化视频函数
        this.player = new Jessibuca({
          decoder: '/jessibuca/decoder.js',
          container: this.$refs.thisEl,//jessibuca需要容器
          videoBuffer: 1.2, // 缓存时长
          isResize: false,
          loadingText: "加载中...",
          useMSE: true,
          useWCS: true,
          debug: false,
          // background: "@/assets/icons/svg/no-video.svg",
          showBandwidth: true, // 显示网速
          operateBtns: {
            fullscreen: false,
            screenshot: false,
            play: false,
            audio: false,
          },
          supportDblclickFullscreen: true,
          controlAutoHide: false,
          forceNoOffscreen: true,
          isNotMute: false,
          timeout: 10,
        });

        this.player.on("error", function (error) {
          if (error === jessibuca.ERROR.fetchError) {
            //
          } else if (error === jessibuca.ERROR.webcodecsH265NotSupport) {
            //
          }
          console.log('error:', error)
        })

        this.player.play(this.videoData.url ? this.videoData.url : '')
      })
    },
    /**
     * 视频的双击事件
     */
    onDblclick(){
      //有播放路径时再触发
      if (this.data.url) {
        this.$emit("videoDblclick", this.data)
      }
    },
    replayVideo(item){
      if (this.player == null) {
        this.initVideo()
      } else {
        this.player.play(item.url)
      }
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
.videoPlay1 {
  width: 100%;
  height: 100%;
  margin: 0px;
  .cover-img{
    width: 100%;
    height: 100%;
  }
}

</style>
